<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物种类知识</title>
    <link rel="stylesheet" href="styles.css"> <!-- Link to external CSS file for styles -->
    <style>
        /* styles.css */

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f3e9e9;
            /* 设置整体背景颜色 */
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }

        header nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        header nav ul li {
            display: inline;
            margin-right: 20px;
        }

        header nav ul li a {
            color: #fff;
            text-decoration: none;
            padding: 10px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        header nav ul li a:hover {
            background-color: #fcc;
        }

        .slideshow-container {
            position: relative;
            max-width: 95%;
            /* 固定最大宽度 */
            height: 450px;
            /* 固定高度 */
            margin: auto;
            overflow: hidden;
            border: 7px outset rosybrown;
            /* Add border */
            border-radius: 8px;
            /* Add border radius */
        }

        .mySlides {
            display: none;
            width: 100%;
        }

        .mySlides img {
            width: 100%;
            vertical-align: middle;
        }

        /* Manual control buttons */
        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        .prev:hover,
        .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        h2 {
            font-size: 24px;
            /* 设置合适的字体大小 */
            color: #333;
            /* 设置字体颜色 */
            margin-bottom: 10px;
            /* 设置标题与下面内容的间距 */
            border-bottom: 2px solid #ccc;
            /* 添加底部边框，增强视觉效果 */
            padding-bottom: 5px;
            /* 设置底部边框与文字的间距 */
        }

        aside {
            background-color: #333;
            /* 设置侧边栏背景颜色 */
            padding: 10px;
            /* 设置内边距 */

            border-radius: 10px;
            /* 设置圆角边框 */
        }

        .category-list {
            list-style-type: none;
            /* 去除默认列表样式 */
            padding: 0;
            margin: 0;
        }

        .category-list li {
            display: inline-block;
            /* 让列表项以内联块元素显示，使其水平排列 */
            margin: 0 70px;
            /* 设置右侧间距 */
            padding: 10px 70px;
            /* 设置内边距 */
            border: 1px solid #ccc;
            /* 添加边框 */
            border-radius: 3px;
            /* 设置圆角边框 */
            background-color: pink;
        }

        .category-list li a {
            text-decoration: none;
            /* 去除下划线 */
            color: black;
            /* 设置字体颜色 */
        }

        .category-list li a:hover {
            background-color: palegoldenrod;
            /* 设置鼠标悬停时的背景颜色 */
        }

        .category-content {
            display: none;
            /* 初始隐藏所有类别内容 */
        }

        .kp {
            margin: 0 auto;
            width: 70%;
        }
    </style>






    </style>
</head>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物种类知识</title>
    <link rel="stylesheet" href="styles.css"> <!-- Link to external CSS file for styles -->
    <style>
        /* Your CSS styles remain the same */
    </style>
</head>

<body>
    <!-- Header with navigation -->
    <header>
        <nav>
            <ul>
                <li><a href="/">系统首页</a></li>
                <li><a href="/kind">宠物种类知识</a></li>
                <li><a href="/adopt">领养宠物页面</a></li>
                <li><a href="/Adoption">送养宠物页面</a></li>
                <li><a href="/Blogger">宠物博客交流中心</a></li>
                <li><a href="/PersonalCenter">个人中心</a></li>
            </ul>
        </nav>
    </header>

    <!-- Main content -->
    <main>
        <!-- Slideshow container -->
        <div class="slideshow-container">
            <div class="mySlides fade">
                <img src="../static/images/kp1.jpg" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="../static/images/kp2.jpg" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="../static/images/kp3.jpg" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="../static/images/kp4.jpg" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="../static/images/kp5.jpg" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="../static/images/kp6.jpg" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="../static/images/kp7.jpg" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="../static/images/kp8.jpg" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="../static/images/kp9.jpg" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="../static/images/kp10.jpg" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="../static/images/kp11.jpg" style="width:100%">
            </div>
            <!-- Add more slides as needed -->

        </div>

        <!-- Sidebar -->
        <aside>
            <ul class="category-list">
                <li><a href="#dogs" onclick="showCategory('dogs')">狗狗知识科普</a></li>
                <li><a href="#cats" onclick="showCategory('cats')">猫咪猫知识科普</a></li>
                <li><a href="#birds" onclick="showCategory('birds')">鸟类知识科普</a></li>
                <!-- Add more categories as needed -->
            </ul>
        </aside>

        <!-- Main content sections -->
        <section class="content">
            <div class="category-content" id="dogs">
                <h2 style="font-size: 50px; color: brown;">狗狗小知识</h2>
                <div class="kp">
                    <img src="../static/images/gkp1.jpg" width="100%">
                    <img src="../static/images/gkp2.jpg" width="100%">
                    <img src="../static/images/gkp3.jpg" width="100%">
                    <img src="../static/images/gkp4.jpg" width="100%">
                    <img src="../static/images/gkp5.jpg" width="100%">
                    <img src="../static/images/gkp6.jpg" width="100%">
                    <img src="../static/images/gkp7.jpg" width="100%">
                    <img src="../static/images/gkp8.jpg" width="100%">
                    <img src="../static/images/gkp9.jpg" width="100%">
                    <img src="../static/images/gkp10.jpg" width="100%">
                </div>
            </div>
            <div class="category-content" id="cats">
                <h2 style="font-size: 50px; color: green;">猫猫小知识</h2>
                <div class="kp">
                    <img src="../static/images/mkp1.jpg" width="100%">
                    <img src="../static/images/mkp2.jpg" width="100%">
                    <img src="../static/images/mkp3.jpg" width="100%">
                </div>
            </div>
            <div class="category-content" id="birds">
                <h2>鸟类</h2>
                <p>关于鸟的信息放在这里...</p>
            </div>
            <!-- Add more sections for other categories -->
        </section>
    </main>

    <!-- JavaScript for category interaction -->
    <script>
        var slideIndex = 0;
        showSlides();

        function showSlides() {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) { slideIndex = 1 }
            slides[slideIndex - 1].style.display = "block";
            setTimeout(showSlides, 2000); // Automatic slideshow, changes every 2 seconds
        }

        // Manual control functions
        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        // Function to show/hide category content
        function showCategory(category) {
            // Hide all category contents
            var categoryContents = document.getElementsByClassName("category-content");
            for (var i = 0; i < categoryContents.length; i++) {
                categoryContents[i].style.display = "none";
            }
            // Show the selected category content
            document.getElementById(category).style.display = "block";
        }


    </script>

</body>

</html>